<template>
    <el-menu default-active="1" class="el-menu-vertical-demo menu-div" background-color="#545c64" text-color="#fff"
        active-text-color="#409eff" style="height: 100%; overflow-y: auto;" @select="select" :collapse="isCollapse">
        <!-- <el-menu-item :index="item.path + '/' + childItem.path" v-for="(childItem, index) in item.children"
            :key="'child' + index">
            <i v-if="childItem.meta && childItem.meta.icon" :class="childItem.meta.icon"></i>
            <span v-if="childItem.meta && childItem.meta.title">{{ childItem.meta.title }}</span>
        </el-menu-item> -->
        
        <div v-for="item, index in menuInfo" :key="index" v-if="item.hidden == null || !item.hidden" class="menu-item">
            <el-menu-item v-if="item.children == null" :index="item.path">
                <i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
                <span v-if="item.meta && item.meta.title" slot="title">{{ item.meta.title }}</span>
            </el-menu-item>

            <el-submenu v-else :index="index + ''">
                <template slot="title">
                    <i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
                    <span v-if="item.meta && item.meta.title" slot="title">{{ item.meta.title }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="item.path + '/' + childItem.path" v-for="(childItem, index) in item.children"
                        :key="'child' + index">
                        <i v-if="childItem.meta && childItem.meta.icon" :class="childItem.meta.icon"></i>
                        <span v-if="childItem.meta && childItem.meta.title">{{ childItem.meta.title }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </div>
        
    </el-menu>
</template>
  
<script>
export default {
    name: "Meun",
    data() {
        return {

        }
    },
    mounted() {

    },
    methods: {
        // 跳转路径
        select(index) {
            console.log(index)
            this.$router.push(index)
        },

    },
    computed: {
        menuInfo() {
            return this.$store.state.menu.routers || []
        },
        isCollapse() {
            return this.$store.state.menu.isCollapse
        }
    }

}
</script>
  
<style scoped>
.menu-div {
    height: 100%;
    box-shadow: 2px 0 6px rgba(0, 21, 41, .01);
    z-index: 1;
    transition: width .3s ease;
}

/*由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一，但是却嵌套了<div>,而导致收折就隐藏不了文字*/
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
    display: none !important;
}

/*隐藏 > */
::v-deep .menu-item .el-icon-arrow-right {
    display: none !important;
}
</style>